import { React, useRef } from "react";
import axios from "axios";
import "../../theCSS/anniu.css";
import "./forgetPass.css";
import { message } from "antd";
import 'antd/dist/antd.css'
import yanzhengma from "../loginID/img/verify.png";
import { Link,useNavigate} from "react-router-dom";

import InterIP from '../../IP/IP'

export default function ForgetPass() {
  const navigate = useNavigate();
  let IP = InterIP().props.children;
  const user = useRef();
  const user_1 = useRef();
  const pass = useRef();
  const pass_1 = useRef();
  const pass2 = useRef();
  const pass2_1 = useRef();
  const Code = useRef();
  const Code_1 = useRef();

  function change_content() {
    user_1.current.style.color = "transparent";
  }
  function change_content1() {
    pass_1.current.style.color = "transparent";
  }
  function change_content2() {
    pass2_1.current.style.color = "transparent";
  }
  function change_content3() {
    Code_1.current.style.color = "transparent";
  }

  function forgetSubmit() {
    if (user.current.value === "") {
      user_1.current.style.color = "red";
    }
    if (pass.current.value === "") {
      pass_1.current.style.color = "red";
    }
    if (pass2.current.value === "") {
      pass2_1.current.style.color = "red";
    }
    if (Code.current.value === "") {
      Code_1.current.style.color = "red";
    }

    if (
      Code.current.value === "xqcr" &&
      user.current.value &&
      pass.current.value
    ) {
      axios
        .post("http://" + IP + ":3000/login/forgetPass", {
          user: user.current.value,
          pass: pass.current.value,
        })
        .then((res) => {
          if(res.data.msg){
            message.success(res.data.msg);
            navigate('/loginID');
          }
        });
    }
  }

  function login_huophonecode() {
    axios
      .post("http://" + IP + ":3000/login/authCode", {
        id: "1",
      })
      .then((res) => {
        alert(res.data[0].code);
      });
  }

  return (
    <div className="login_main login_main2">
      <div className="login_biaoti login_biaoti2">重置密码</div>

      <input
        type="text"
        className="login_shuru login_shuru2"
        placeholder="请输入手机号"
        ref={user}
        onChange={change_content}
      ></input>
      <div className="login_jinggao2_f" ref={user_1}>
        请输入手机号!
      </div>

      <input
        type="text"
        className="login_shuru login_shuru2"
        placeholder="请输入密码"
        ref={pass}
        onChange={change_content1}
      ></input>
      <div className="login_jinggao2_f" ref={pass_1}>
        请输入密码!
      </div>

      <input
        type="text"
        className="login_shuru login_shuru2"
        placeholder="请再次输入密码"
        ref={pass2}
        onChange={change_content2}
      ></input>
      <div className="login_jinggao2_f" ref={pass2_1}>
        请再次输入密码!
      </div>

      <div id="login_yanzheng">
        <input
          onChange={change_content3}
          type="text"
          className="login_shuru login_shuru2"
          id="yanzhengma"
          placeholder="验证码"
          ref={Code}
        ></input>
        <img src={yanzhengma} alt=""></img>
        <span>看不清换一张</span>
      </div>
      <div className="login_jinggao2_f" ref={Code_1}>
        请输入验证码!
      </div>

      <div className="login_phonecode">
        <input
          type="text"
          className="login_shuru login_shuru2"
          placeholder="手机验证码"
        ></input>
        <button onClick={login_huophonecode}>获取验证码</button>
      </div>

      <div className="login_jinggao2_f">请输入手机验证码!</div>

      <div className="login_dibutton login_dibutton2">
        <button className="login_tijiao login_tijiao2" onClick={forgetSubmit}>
          提交
        </button>
        <Link to="/loginID">
          <button className="login_tijiao login_tijiao3">返回登录</button>
        </Link>
      </div>
    </div>
  );
}
